<template>
    <div class="container">
        <div class="floorlistTop">
            <el-button @click="addFloorShow = true" type="primary" size="small"> 新增楼层 </el-button>
        </div>
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border default-expand-all>
            <el-table-column prop="name" label="楼层" align="center"> </el-table-column>
            <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="inquire(scope.$index)" type="text" size="small"> 查看房间 </el-button>
                    <el-button @click.native.prevent="(updateFloorShow = true), (form = scope.row)" type="text" size="small">
                        修改
                    </el-button>
                    <el-button @click.native.prevent="floorDelete(scope.row.id)" type="text" size="small"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="floorlistTop">
            <el-button @click="addHouse" type="primary" size="small"> 新增房间 </el-button>
            <label>{{ title }}</label>
        </div>
        <el-table :data="tableData1" style="width: 100%; margin-bottom: 20px" border default-expand-all>
            <el-table-column prop="roomNumber" label="房间" width="180" align="center"> </el-table-column>
            <el-table-column prop="layout" label="布局" width="180" align="center"> </el-table-column>
            <el-table-column prop="highProportion" label="房间占比" width="180" align="center"> </el-table-column>
            <el-table-column prop="reserveVip" label="VIP" width="180" align="center"> </el-table-column>
            <el-table-column label="背景图" align="center">
                <template slot-scope="scope">
                    <img style="height: 4rem" :src="scope.row.backgroundImage" alt="" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="(form1 = scope.row), (img[0].url = scope.row.backgroundImage), (updateHouseShow = true)"
                        type="text"
                        size="small"
                    >
                        修改
                    </el-button>
                    <el-button @click.native.prevent="houseDelete(scope.$index)" type="text" size="small"> 删除 </el-button>
                    <el-button @click.native.prevent="houseDetail(scope.row.id)" type="text" size="small"> 查看详情 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增楼层弹窗 -->
        <el-dialog title="新增楼层" :visible.sync="addFloorShow" width="30%" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="楼层">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="(addFloorShow = false), (form = {})">取 消</el-button>
                <el-button type="primary" @click="addFloor">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改楼层弹窗 -->
        <el-dialog title="新增楼层" :visible.sync="updateFloorShow" width="30%" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="楼层">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="(updateFloorShow = false), (form = {})">取 消</el-button>
                <el-button type="primary" @click="floorUpdate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改房间弹窗 -->
        <el-dialog title="修改" :visible.sync="updateHouseShow" width="30%" :close-on-click-modal="false">
            <el-form :model="form1" label-width="auto">
                <el-form-item label="房间类型">
                    <el-select v-model="form1.type" placeholder="请选择">
                        <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="竖排布局">
                    <el-input v-model="form1.layout"></el-input>
                </el-form-item>
                <el-form-item label="房间比列">
                    <el-input v-model="form1.highProportion"></el-input>
                </el-form-item>
                <el-form-item label="房间号" v-if="form1.type == 1">
                    <el-input v-model="form1.roomNumber"></el-input>
                </el-form-item>
                <el-form-item label="是否需要vip">
                    <el-select v-model="form1.reserveVip" placeholder="请选择">
                        <el-option label="不需要" value="0"></el-option>
                        <el-option label="需要" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="背景图">
                    <el-upload
                        :headers="myHeaders"
                        :action="uploadsrc"
                        accept="image/jpeg,image/gif,image/png"
                        list-type="picture-card"
                        :limit="1"
                        :class="img.length > 0 ? 'hide' : ''"
                        :before-upload="handleBeforeUpload"
                        :on-success="uploadLogoSuccess"
                        :on-remove="handleRemove"
                        :on-error="uploadError"
                        :file-list="img"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button @click="updateHouseShow = false">取 消</el-button>
                    <el-button type="primary" @click="houseUpdate">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
const geturlkey = require('../../../utils/geturlkey');
import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
export default {
    data() {
        return {
            tableData: [],
            tableData1: [],
            title: '',
            addFloorShow: false,
            updateFloorShow: false,
            updateHouseShow: false,
            form: {},
            form1: {},
            myHeaders: {},
            img: [{ url: '' }],
            option: [
                { label: '房间', value: '1' },
                { label: '大厅', value: '2' },
                { label: '走廊', value: '3' }
            ],
            teahouseId: '',
            index: 0
        };
    },
    created() {
        this.uploadsrc = uploadsrc;
        this.teahouseId = geturlkey.getUrlKey('id') ? geturlkey.getUrlKey('id') : 1;
        this.floorList();
    },
    methods: {
        floorList() {
            inquireFloor(this.teahouseId).then(
                (res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        for (let j = 0; j < res.data[i].floorRooms.length; j++) {
                            res.data[i].floorRooms[j].type = res.data[i].floorRooms[j].type.toString()
                        }
                    }
                    this.tableData = res.data;
                    this.tableData1 = res.data[0].floorRooms;
                    this.title = res.data[0].name;
                },
                (err) => {
                    this.$message.error('操作失败:' + err.returnMsg);
                }
            );
        },
        inquire(e) {
            this.tableData1 = this.tableData[e].floorRooms;
            this.title = this.tableData[e].name;
            this.index = e;
        },
        addFloor() {
            let data = {
                teahouseId: this.teahouseId,
                name: this.form.name,
                remark: this.form.remark,
                sort: this.form.sort
            };
            addFloor(data).then(
                (res) => {
                    if (res.returnCode == 200) {
                        this.$message.success('添加成功');
                        this.addFloorShow = false;
                        this.floorList();
                        this.form = {};
                    }
                },
                (err) => {
                    this.$message.error('添加失败:' + err.returnMsg);
                    this.form = {};
                }
            );
        },
        addHouse() {
            layer.open({
                type: 2,
                area: ['50%', '70%'],
                title: '新增房间',
                fixed: true, //不固定
                maxmin: true,
                content: ['/#/houseAdd?floorId=' + this.tableData[this.index].id + '&teahouseId=' + this.teahouseId],
                end: function () {
                    location.reload();
                }
            });
        },
        floorUpdate() {
            let data = {
                teahouseId: this.teahouseId,
                id: this.form.id,
                name: this.form.name,
                remark: this.form.remark,
                sort: this.form.sort
            };
            updateFloor(data).then(
                (res) => {
                    if (res.returnCode == 200) {
                        this.$message.success('修改成功');
                        this.updateFloorShow = false;
                        this.floorList();
                        this.form = {};
                    }
                },
                (err) => {
                    this.$message.error('修改失败:' + err.returnMsg);
                    this.form = {};
                }
            );
        },
        // updateHouseShow(){
        //     this.form1 =scope.row,
        //     img[0].url=scope.row.backgroundImage,
        //     this.updateHouseShow=true
        // },
        // 修改房间信息
        houseUpdate() {
            let query = this.form1;
            query.teahouseId = this.teahouseId;
            updateHouse(query).then(
                (res) => {
                    if (res.returnCode == 200) {
                        this.$message.success('修改成功');
                        this.updateHouseShow = false;
                        this.floorList();
                        this.form1 = {};
                    }
                },
                (err) => {
                    this.$message.error('修改失败:' + err.returnMsg);
                    this.form = {};
                }
            );
        },
        floorDelete(e) {
            let data = {
                id: e,
                isDelete: 0
            };
            this.$confirm('此操作将删除该楼层, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    updateFloor(data).then(
                        (res) => {
                            if (res.returnCode == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        },
                        (err) => {
                            this.$message.error('删除失败:' + err.returnMsg);
                        }
                    );
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 房间删除
        houseDelete(e) {
            let data = this.tableData[this.index].floorRooms[e];
            data.isDelete = 0;
            data.teahouseId = this.teahouseId;
            this.$confirm('此操作将删除该楼层, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    updateHouse(data).then(
                        (res) => {
                            if (res.returnCode == 200) {
                                this.$message.success('删除成功');
                                this.tableData[this.index].floorRooms.splice(e, 1);
                            }
                        },
                        (err) => {
                            this.$message.error('删除失败:' + res.returnMsg);
                        }
                    );
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        houseDetail(e) {
            layer.open({
                type: 2,
                area: ['50%', '70%'],
                title: '房间详情',
                fixed: true, //不固定
                maxmin: true,
                content: ['/#/houseUpdate?roomId=' + e],
                end: function () {
                    location.reload();
                }
            });
        },
        handleBeforeUpload(file) {
            this.getmyHeaders();
        },
        getmyHeaders() {
            var dHeader = dynamicHeader();
            this.myHeaders.signature = dHeader.signature;
            this.myHeaders.nonce = dHeader.nonce;
            this.myHeaders.timestamp = dHeader.timestamp;
            this.myHeaders.appkey = dHeader.appkey;
            this.myHeaders.token = dHeader.token;
        },
        uploadLogoSuccess(data) {
            if (data.returnCode == 200) {
                this.form1.backgroundImage = data.data;
                let imgUrl = {
                    url: data.data
                };
                this.img.push(imgUrl);
            } else {
                this.$message.error(`上传失败，请重新上传`);
            }
        },
        handleRemove(file, fileList) {
            this.form1.backgroundImage = [];
            this.img = [];
        },
        uploadError() {
            this.$message.error(`上传失败，请重新上传`);
        }
    }
};
</script>
<style>
.floorlistTop {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 0.5rem;
    justify-content: space-between;
    color: #666;
}
.hide .el-upload--picture-card {
    display: none;
}
</style>